<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:insert="~{fragment/header :: header}"></th:block>
    <title>Update</title>
    <meta content="text/html;charset=UTF-8" http-equiv="Content-Type">
    <link rel="stylesheet" href="/editor/css/editormd.min.css">
    <script src="/editor/editormd.min.js"></script>
    <script src="/js/turndown.js"></script>
</head>
<body>
<div class="ui container segment" id="vproblem">
    <div class="ui header">支持Markdown</div>
    <form onsubmit="return false" class="ui form">
        <div class="field">
            Title:<input name="title" type="text" v-model="title">
        </div>
        <div class="field">
            <div class="ui checkbox">
                <label for="active">可见</label>
                <input id="active" name="acvive" v-model="active" type="checkbox">
            </div>
        </div>
        <div class="field">
            <div class="ui right labeled input ">
                <label class="ui label">Time Limit:</label>
                <input type="text" placeholder="Time Limit" v-model="time">
                <div class="ui basic label">
                    ms
                </div>
            </div>
        </div>
        <div class="field">
            <div class="ui right labeled input ">
                <label class="ui label">Memory Limit:</label>
                <input type="text" placeholder="Memory Limit" v-model="memory">
                <div class="ui basic label">
                    bytes
                </div>
            </div>
        </div>
        <div class="ui field">Tags(用
            <mark>英文逗号</mark>
            分隔，只能是已经存在的tag)
            <input name="tag" type="text" required v-model="tags">
        </div>
        <div class="field">
            题目分数Score: <input name="score" type="number" required v-model="score">
        </div>
        <div class="ui button" v-on:click="html2Markdown">Html To Markdown</div>
        <div class="field">
            题目描述Description:
            <div id="editor-description">
                <textarea name="description" style="display: none" v-model="description"></textarea>
            </div>
        </div>
        <div class="field">
            输入Input:
            <div id="editor-input">
                <textarea name="input" style="display: none" v-model="input"></textarea></div>
        </div>
        <div class="field">
            输出Output:
            <div id="editor-output">
                <textarea name="output" style="display: none;" v-model="output"></textarea></div>
        </div>
        <div class="field">
            Sample Input:
            <textarea name="sampleInput" rows="8" v-model="sampleInput"></textarea></div>
        <div class="field">
            Sample Output:
            <textarea name="sampleOutput" rows="8" v-model="sampleOutput"></textarea>
        </div>
        <div class="form-group">
            提示Hint:
            <div class="form-group" id="editor-hint">
                <textarea name="hint" style="display: none" v-model="hint"></textarea></div>
        </div>
        <div class="form-group">
            来源Source: <textarea class="form-control" v-model="source" cols="35" name="source" rows="3"></textarea>
        </div>
        <div class="ui button green" v-on:click="submit_problem()">提交Submit</div>
    </form>
</div>
<script>
    c = new TurndownService();

    function html2Markdown(s) {
        return c.turndown(s);
    }

    pid = location.pathname.split('/');
    pid = pid[pid.length - 1];
    $('.ui.checkbox').checkbox();
    var editor_description;
    var editor_input;
    var editor_output;
    var editor_hint;
    var vproblem = new Vue({
        el: "#vproblem",
        data: {
            title: "",
            description: "",
            input: "",
            output: "",
            active: false,
            time: "",
            memory: "",
            score: 0,
            sampleInput: "",
            sampleOutput: "",
            hint: "",
            source: "",
            tags: ""
        },
        methods: {
            html2Markdown() {
                editor_description.setMarkdown(html2Markdown(editor_description.getMarkdown()));
                editor_input.setMarkdown(html2Markdown(editor_input.getMarkdown()));
                editor_output.setMarkdown(html2Markdown(editor_output.getMarkdown()));
                editor_hint.setMarkdown(html2Markdown(editor_hint.getMarkdown()));
            },
            submit_problem() {
                this.description = editor_description.getMarkdown();
                this.input = editor_input.getMarkdown();
                this.output = editor_output.getMarkdown();
                this.hint = editor_hint.getMarkdown();
                axios.post("/api/admin/problem/edit/" + pid, {
                    title: this.title,
                    description: this.description,
                    input: this.input,
                    output: this.output,
                    sampleInput: this.sampleInput,
                    sampleOutput: this.sampleOutput,
                    hint: this.hint,
                    source: this.source,
                    time: this.time,
                    memory: this.memory,
                    active: this.active,
                    score: this.score,
                    tags: this.tags
                }).then(function (res) {
                    res = res.data;
                    if (res !== "success") {
                        console.log(res);
                        alert(res);
                    } else {
                        alert("success")
                        location.reload();
                    }
                })
            }
        },
        created() {
            var that = this;
            axios.get("/api/admin/problem/" + pid).then(function (res) {
                res = res.data;
                that.title = res.title;
                that.description = res.description;
                that.input = res.input;
                that.output = res.output;
                that.active = res.active;
                that.time = res.timeLimit;
                that.memory = res.memoryLimit;
                that.score = res.score;
                that.sampleInput = res.sampleInput;
                that.sampleOutput = res.sampleOutput;
                that.hint = res.hint;
                that.source = res.source;
                that.tags = "";
                if (res.tags.length > 0)
                    that.tags = res.tags[0].name;
                for (let i = 1; i < res.tags.length; i++) {
                    that.tags += "," + res.tags[i].name;
                }
                $(function () {
                    editor_description = editormd({
                        id: "editor-description",
                        path: "/editor/lib/",
                        pluginPath: "/editor/plugins/",
                        width: "90%",
                        height: 500,
                        autoFocus: false,
                        codeFold: true,
                        searchReplace: true,
                        autoLoadKaTeX: true,
                        tex: true,
                        flowChart: true,
                        htmlDecode: "style,script,iframe|on*",
                        previewCodeHighlight: true,
                        imageUploadURL: "/api/media/upload",
                        imageUpload: true,
                        imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "ico"],
                    });
                    editor_input = editormd({
                        id: "editor-input",
                        path: "/editor/lib/",
                        pluginPath: "/editor/plugins/",
                        width: "90%",
                        height: 500,
                        autoFocus: false,
                        codeFold: true,
                        searchReplace: true,
                        autoLoadKaTeX: true,
                        tex: true,
                        flowChart: true,
                        previewCodeHighlight: true,
                        htmlDecode: "style,script,iframe|on*",
                        imageUploadURL: "/api/media/upload",
                        imageUpload: true,
                        imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "ico"],
                    });
                    editor_output = editormd({
                        id: "editor-output",
                        path: "/editor/lib/",
                        pluginPath: "/editor/plugins/",
                        width: "90%",
                        height: 500,
                        autoFocus: false,
                        codeFold: true,
                        searchReplace: true,
                        autoLoadKaTeX: true,
                        htmlDecode: "style,script,iframe|on*",
                        tex: true,
                        flowChart: true,
                        previewCodeHighlight: true,
                        imageUploadURL: "/api/media/upload",
                        imageUpload: true,
                        imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "ico"],
                    });
                    editor_hint = editormd({
                        id: "editor-hint",
                        path: "/editor/lib/",
                        pluginPath: "/editor/plugins/",
                        width: "90%",
                        height: 500,
                        autoFocus: false,
                        codeFold: true,
                        searchReplace: true,
                        autoLoadKaTeX: true,
                        htmlDecode: "style,script,iframe|on*",
                        tex: true,
                        flowChart: true,
                        previewCodeHighlight: true,
                        imageUploadURL: "/api/media/upload",
                        imageUpload: true,
                        imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "ico"],
                    });
                });
            })
        }
    })
</script>
</body>
</html>
